<template>
  <div class="h-full" v-if="lng && lat && name">
    <baidu-map class="map" :center="{lng, lat}" @ready="mapReady" :ak="baiduMapAk" :zoom="14">
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"></bm-geolocation>
      <bm-marker
        :position="{lng, lat}"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
        :clicking="false"
      ></bm-marker>
    </baidu-map>
    <div class="h-80 p-10 flex a-center j-between">
      <p class="fs-rem-16px text-content">{{name}}</p>
      <div
        @click="toApp()"
        class="w-60 h-60 flex-column a-center j-center text-white bg-darkblue b-round"
      >
        <svg-icon class="fs-rem-20px" name="daohang" />
        <p>导航</p>
      </div>
    </div>
  </div>
</template>

<script>
import { BaiduMap, BmMarker, BmGeolocation } from 'vue-baidu-map/components'
import { BaiduMapAk } from '@/config'
export default {
  data () {
    return {
      lng: null,
      lat: null,
      name: null,
      baiduMapAk: BaiduMapAk
    }
  },
  components: {
    BaiduMap,
    BmMarker,
    BmGeolocation
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.checkQuery()
    },
    checkQuery () {
      // lng经度 lat 纬度
      let { lng, lat, name } = this.$route.query
      if (!lng || !lat || !name) {
        this.$router.push('/')
      } else {
        this.lng = lng
        this.lat = lat
        this.name = name
      }
    },
    mapReady () {

    },
    toApp () {
      window.location = `http://api.map.baidu.com/marker?location=${this.lat},${this.lng}&title=商家位置&content=${this.name}&output=html&src=webapp.baidu.openAPIdemo`
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: calc(100% - 80px);
}
.bg-darkblue {
  background: #1989fa;
}
</style>
